<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <div v-for="buy,i in cart">

        <!-- 给每个单选框绑定一个值和一个事件，根据商品的选择状态来设置值和触发事件 -->
        <input type="checkbox" name="" id="" :value="buy.sel" @change="select(i)">

        <img :src="buy.pic" width="200px" height="100px" alt="">

        <span>{{buy.genme}}   {{buy.price}}元</span>

        <!-- 给每个加号按钮绑定一个事件，根据商品的索引来增加数量和价格 -->
        <button @click="add(i)">+</button>
        <!-- 显示商品的数量 -->
        <input type="text" :value="buy.n" readonly>

        <!-- 给每个减号按钮绑定一个事件，根据商品的索引来减少数量和价格 -->
        <button @click="sub(i)">-</button>
       </div>
       <!-- 显示总价 -->
       <div>合计:{{total}}</div>
    </div>
    <script src="/js/js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            
            data: {
               cart:[
                {genme:"手机",price:20,n:1,sel:0,pic:'/image/wallhaven-1pwq23_2560x1600.png',},
                {genme:"电脑",price:30,n:1,sel:0,pic:'/image/wallhaven-1pwq23_2560x1600.png',},
                {genme:"手表",price:40,n:1,sel:0,pic:'/image/wallhaven-1pwq23_2560x1600.png',}
               ],
               // 定义一个变量，用于存放总价
               total: 0

            },
            methods: {
                // 定义一个方法，用于增加商品的数量和价格
                add(i) {
                    // 根据索引，找到对应的商品
                    var buy = this.cart[i];
                    // 数量加一
                    buy.n++;
                    // 如果该商品被选中，更新总价
                    if (buy.sel == 1) {
                        this.total += buy.price;
                    }
                },
                // 定义一个方法，用于减少商品的数量和价格
                sub(i) {
                    // 根据索引，找到对应的商品
                    var buy = this.cart[i];
                    // 如果数量大于一，才能减少
                    if (buy.n > 1) {
                        // 数量减一
                        buy.n--;
                        // 如果该商品被选中，更新总价
                        if (buy.sel == 1) {
                            this.total -= buy.price;
                        }
                    }
                },
                // 定义一个方法，用于选择或取消选择商品
                select(i) {
                    // 根据索引，找到对应的商品
                    var buy = this.cart[i];
                    // 如果该商品未被选中，将其选择状态设为1，并更新总价
                    if (buy.sel == 0) {
                        buy.sel = 1;
                        this.total += buy.price * buy.n;
                    } else {
                        // 如果该商品已被选中，将其选择状态设为0，并更新总价
                        buy.sel = 0;
                        this.total -= buy.price * buy.n;
                    }
                }
            }
        })
    </script>
</body>
</html>
